<template>
  <div class='conference' v-loading="conferenceInfo.loading">
    <div class='conference-right'>
      <FullCalendar
        ref="fullCalendar"
        class='calendar-full'
        :options='calendarOptions'>
      </FullCalendar>
    </div>
    <div style="position: absolute; top:15px; left:200px"> 
      会议室：
      <el-select v-model="conferenceInfo.defultConferenceRoomId" placeholder="请选择会议室" style="width:300px; " size='small' @change="changeConferenceRoom" >
              <el-option
                v-for="item in conferenceInfo.conferenceRoom"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
      </el-select>
    </div>
    <!-- 新增或修改日历 -->
    <el-dialog :title="dialogTitle" width="70%" :visible.sync="conferenceInfo.conferenceVisible" :destroy-on-close='true' :close-on-click-modal="false">
      <avue-form 
          ref="conferenceForm" 
          v-model="form" 
          :option="option"  
          @submit="submitForm"
        >
        <template slot-scope="scope" slot="genUrlBtn">
          <div style="float:right;">
            <el-button type="primary" @click="createTencentMeeting">生成腾讯会议链接
            </el-button>
            <el-button v-if="form.conferenceUrl" style="margin-left:20px;" type="text" @click="openShare">发送邀请
            </el-button>
          </div>
        </template>
        <template slot-scope="scope" slot="conferenceAttList">
          <file-selector
                :fileList="form.conferenceAttList"
                openType="edit"
                :multiple="true"
                @changeFileList='changeFileList'
              >
          </file-selector>
        </template>
        <template v-if="conferenceInfo.isEdit" slot-scope="scope" slot="menuForm">
            <el-button type="danger" @click="deleteConferenceInfo">删除会议</el-button>
            <div  style="text-align:right; float:right">
              <el-button type="text"  icon="el-icon-time" style="font-weight:normal;" size="large" @click.stop="getHistoryRecord">修改历史</el-button>
            </div> 
        </template>
      </avue-form> 
    </el-dialog>
    <!-- 邀请对话框 -->
    <el-dialog title="邀请" width="500px" :visible.sync="conferenceInfo.shareVisible" :close-on-click-modal="false">
      <el-input
        id="shareText"
        type="textarea"
        :autosize="{ minRows: 5, maxRows: 20}"
        readonly='true'
        v-model="conferenceInfo.shareText">
      </el-input>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" id="copyBtn" @click="copyClipboard($event)" data-clipboard-target="#sqlText">复制</el-button>
        <el-button size="small" @click="conferenceInfo.shareVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 历史记录 -->
    <update-history  v-if="conferenceInfo.isEdit"  ref="historyRecord"></update-history>
  </div>
</template>
<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import momentPlugin from '@fullcalendar/moment' 
import listPlugin from '@fullcalendar/list';

import { INITIAL_EVENTS, createEventId } from '@/event-utils'
import 'bootstrap/dist/css/bootstrap.css';
import bootstrapPlugin from '@fullcalendar/bootstrap';

import {exportGeneralConferenceInfoExcel,saveOrUpdateGeneralConferenceInfo,saveOrUpdateGeneralConferenceInfoList,saveGeneralConferenceInfo,saveGeneralConferenceInfoList,deleteGeneralConferenceInfo,queryGeneralConferenceInfo,queryGeneralConferenceInfoListPage,updateGeneralConferenceInfo,deleteGeneralConferenceInfoList,queryConferenceDuration, createTencentMeeting, sendNotice} from '@/api/general/conference/generalConferenceInfoApi';
import {queryGeneralConferenceRoomListPage} from '@/api/general/conference/generalConferenceRoomApi';
import {queryGeneralProjectInfoListPage} from '@/api/general/project/generalProjectInfoApi';
import {querySysUserInfoListPage} from '@/api/system/sysUserInfoApi';
import {mapGetters} from 'vuex';
import { reqCommonMsg } from '@/util/reqCommonMsg';
import {dateFormat} from '@/util/date';
import {copyToClipboard} from '@/util/util';

export default {

  components: {
    FullCalendar // make the <FullCalendar> tag available
  },

  data: function() {
    return {
      dialogTitle:'创建会议',
      calendarOptions: {
        plugins: [
          //resourceTimeGridPlugin,
          bootstrapPlugin,
          listPlugin, 
          momentPlugin,
          dayGridPlugin,
          timeGridPlugin,
          interactionPlugin // needed for dateClick
        ],
        //schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
        themeSystem: 'bootstrap',
        headerToolbar: {
          left: 'prev,next,today',
          center: 'title',
          right: 'listWeek,dayGridMonth,timeGridWeek,timeGridDay'
        },
        initialView: 'dayGridMonth',
        resources: [
          { id: 'a', title: 'Auditorium A' },
          { id: 'b', title: 'Auditorium B' },
          { id: 'c', title: 'Auditorium C' }
        ],
        initialEvents: INITIAL_EVENTS, // alternatively, use the `events` setting to fetch from a feed
        editable: true,
        selectable: true,
        selectMirror: true,
        dayMaxEvents: true,
        weekends: true,
        select: this.handleDateSelect,
        eventClick: this.handleEventClick,
        eventsSet: this.handleEvents,
        dateClick: this.handleDateClick,
        // dayCellDidMount: function(info) {
        //   //this.$console.log('info===',info);
        //   return 'test001'
        // },
        eventDidMount: function(info) {
          //$(info.el).tooltip({title: '11111'});             
          //this.$console.log('info===',info);
          // var tooltip = new Tooltip(info.el, {
          //   title: info.event.extendedProps.description,
          //   placement: 'top',
          //   trigger: 'hover',
          //   container: 'body'
          // });
        },
        eventRender: function(event, element) {
          element.attr('title', event.tip);
        },
        height: '100%',
        events:[],
        week: 'narrow',
        buttonText: {
          next: '>',
          prev: '<',
          allday: '整天',
          today: '今天',
          month: '月',
          week: '周',
          day: '天',
          listWeek:'周列表'
        },
        // titleFormat: {
        //   month: 'long',
        //   year: 'numeric',
        //   day: 'numeric',
        //   weekday: 'long'
        // },

        // 整体控制月、周、天顶部的日期显示 
        dayHeaderFormat:{
          weekday: 'short', 
          // year: 'numeric', 
          // month: 'numeric', 
          // day: 'numeric', 
          omitCommas: true 
        },
        // 单独控制月、周、天顶部的日期显示 
        views: {
          timeGridWeek:{
            dayHeaderFormat:{
              weekday: 'short', 
              // year: 'numeric', 
              month: 'numeric', 
              day: 'numeric', 
              omitCommas: true 
            },
          },
        },
        selectMirror: 'true',
        slotMinTime: '00:00:00',
        slotMaxTime: '24:00:00',
        selectable: 'true',
        locale: 'zh-cn', 
        slotEventOverlap: 'false',
        unselectAuto: 'false',
        selectOverlap: 'false',
        businessHours: [],
        firstDay: 1,
        allDaySlot: 'true',
        slotDuration: '00:30',
        slotLabelFormat: 'HH:mm',
        allDayContent: '全天',
        // 随时判断时间是否合法，通过返回true/false来判断是否能够选择
        selectAllow: info => { 
          const currentDate = new Date()
          const start = info.start
          const end = info.end
          return (start <= end && start >= currentDate) || (dateFormat(start).substring(0, 10) === dateFormat(currentDate).substring(0, 10))
        },
        eventMouseEnter: this.eventMouseEnter,
        //eventDragStop: this.eventDragStop,
        // 拖拽结束后
        eventDrop: this.eventDragStop,
        // 调整大小
        eventResize: this.eventResize,

        dragOpacity:{
          agenda:.1, //对于agenda试图
          '':1.0 //其他视图
        },

        //dayCellContent: ''
        /* you can update a remote database when these fire:
        eventAdd:
        eventChange:
        eventRemove:
        */
      },

      currentEvents: [],

      form: {},
      // 会议表单参数
      option: {
        labelPosition: 'right',
        labelSuffix: '：',
        labelWidth: 125,
        labelPosition: 'right',
        labelSuffix: '：',
        labelWidth: 120,
        submitText: '保存',
        emptyBtn:false,
        // submitBtn: false,
        column: [
          {
            label: '会议主题',
            prop: 'conferenceSubject', 
            type: 'input', 
            search: false,
            searchMmultiple: false,
            searchLabelWidth: 100,
            multiple: false,
            span: 24,
            sortable: false,
            hide: false,
            maxlength: 1000,
            overHidden: true,
            rules: [{
              message: '请输入会议主题',
              required:  true,
              trigger: 'blur'
            },
            {
              max: 1000,
              message: '内容长度不能超过1000字符',
              trigger: 'blur'
            }],
            dicData:[],
          },
          {
            label: '会议类型',
            prop: 'conferenceType', 
            type: 'select', 
            search: false,
            searchMmultiple: false,
            searchLabelWidth: 100,
            multiple: false,
            span: 12,
            sortable: false,
            hide: false,
            maxlength: 30,
            overHidden: true,
            value:'普通会议',
            rules: [{
              message: '请选择会议类型',
              required:  true,
              trigger: 'blur'
            },
            {
              max: 30,
              message: '内容长度不能超过30字符',
              trigger: 'blur'
            }],
            dicData:[],
            change: ({value,column}) => {
              if(value == '腾讯会议'){
                this.findObject(this.option.column, 'conferenceUrl').display = true; 
                this.findObject(this.option.column, 'conferenceNo').display = true; 
                this.findObject(this.option.column, 'genUrlBtn').display = true; 
              }
              else{
                this.findObject(this.option.column, 'conferenceUrl').display = false; 
                this.findObject(this.option.column, 'conferenceNo').display = false; 
                this.findObject(this.option.column, 'genUrlBtn').display = false; 
              }
            }
          },
          {
            label: '会议室',
            prop: 'conferenceRoomId', 
            type: 'select', 
            search: false,
            searchMmultiple: false,
            searchLabelWidth: 100,
            multiple: false,
            filterable: true,
            span: 12,
            sortable: false,
            hide: false,
            maxlength: 100,
            overHidden: true,
            rules: [{
              message: '请选择会议室',
              required:  true,
              trigger: 'blur'
            },
            {
              max: 100,
              message: '内容长度不能超过100字符',
              trigger: 'blur'
            }],
            dicData:[],
          },
          
          {
            label: '召集人',
            prop: 'convenerUserName', 
            type: 'select', 
            search: false,
            searchMmultiple: false,
            searchLabelWidth: 100,
            multiple: false,
            span: 12,
            sortable: false,
            hide: false,
            maxlength: 50,
            overHidden: true,
            rules: [{
              message: '请输入主持人',
              required:  true,
              trigger: 'blur'
            },
            {
              max: 50,
              message: '内容长度不能超过50字符',
              trigger: 'blur'
            }],
            dicData:[],
            remote: true,
            dicMethod:'get',
            dicUrl: '/platform/sysUserInfo/querySysUserInfoListPage?optFlag=noorg&columnValue={{key}}&columnName=realName&tenantId='+localStorage.getItem('tenantId'),
            props: {
              label: 'realName',
              value: 'realName'
            },
          },
          {
            label: '项目名称',
            prop: 'projectNo', 
            type: 'select', 
            search: false,
            searchMmultiple: false,
            searchLabelWidth: 100,
            multiple: false,
            filterable: true,
            span: 12,
            sortable: false,
            hide: false,
            maxlength: 100,
            overHidden: true,
            value: '',
            rules: [{
              message: '请选择项目名称',
              required:  true,
              trigger: 'blur'
            },
            {
              max: 100,
              message: '内容长度不能超过100字符',
              trigger: 'blur'
            }],
            dicData:[],
          },
          {
            label: '参与人列表',
            prop: 'participantsList', 
            type: 'select',
            multiple: true,
            filterable: true,
            remote: true,
            span:24,
            props: {
              label: 'realName',
              value: 'realName',
            },
            dicFlag: false,
            dicMethod:'get',
            dicUrl: '/platform/sysUserInfo/querySysUserInfoListPage?optFlag=noorg&remote=yes&columnValue={{key}}&columnName=realName&tenantId='+localStorage.getItem('tenantId'),
            rules: [{
              type: 'array',
              required: true,
              message: '请选择参与人',
            }],
            dicData:[],
          },
          {
            label: '会议开始时间',
            prop: 'conferenceBeginDatetime', 
            type: 'datetime', 
            search: false,
            searchMmultiple: false,
            searchLabelWidth: 100,
            multiple: false,
            span: 12,
            sortable: false,
            hide: false,
            maxlength: 100,
            overHidden: true,
            format: 'yyyy-MM-dd HH:mm:ss',
            valueFormat: 'timestamp',
            rules: [{
              message: '请输入会议开始时间',
              required:  true,
              trigger: 'blur'
            }],
            dicData:[],
            pickerOptions: {
              selectableRange: '00:00:00 - 23:59:59',
              disabledDate(time) {
                const date = new Date();
                let timeStr = dateFormat(time).substring(0, 10);
                let nowStr = dateFormat(date).substring(0, 10);
                return new Date(timeStr)  < new Date(nowStr);
              },
              shortcuts: [
                {
                  text: '现在',
                  onClick(picker) {
                    const date = new Date();
                    picker.$emit('pick', date);
                  }
                },
                {
                  text: '一小时后',
                  onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() + 3600 * 1000);
                    picker.$emit('pick', date);
                  }
                },
                {
                  text: '两小时后',
                  onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() + 7200 * 1000);
                    picker.$emit('pick', date);
                  }
                }
              ]
            } 
          },
          {
            label: '会议结束时间',
            prop: 'conferenceEndDatetime', 
            type: 'datetime', 
            search: false,
            searchMmultiple: false,
            searchLabelWidth: 100,
            multiple: false,
            span: 12,
            sortable: false,
            hide: false,
            maxlength: 100,
            overHidden: true,
            format: 'yyyy-MM-dd HH:mm:ss',
            valueFormat: 'timestamp',
            rules: [{
              message: '请输入会议结束时间',
              required:  true,
              trigger: 'blur'
            }],
            dicData:[],
            pickerOptions: {
              selectableRange: '00:00:00 - 23:59:59',
              disabledDate(time) {
                const date = new Date();
                let timeStr = dateFormat(time).substring(0, 10);
                let nowStr = dateFormat(date).substring(0, 10);
                return new Date(timeStr)  < new Date(nowStr);
              },
              shortcuts: [
                {
                  text: '现在',
                  onClick(picker) {
                    const date = new Date();
                    picker.$emit('pick', date);
                  }
                },
                {
                  text: '一小时后',
                  onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() + 3600 * 1000);
                    picker.$emit('pick', date);
                  }
                },
                {
                  text: '两小时后',
                  onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() + 7200 * 1000);
                    picker.$emit('pick', date);
                  }
                }
              ]
            } 
          },
          {
            label: '生成频率',
            prop: 'generateFrequency', 
            type: 'select', 
            search: false,
            searchMmultiple: false,
            searchLabelWidth: 100,
            multiple: false,
            span: 6,
            sortable: false,
            hide: false,
            maxlength: 10,
            overHidden: true,
            value: '1-N',
            rules: [{
              message: '请输入生成频率',
              required:  true,
              trigger: 'blur'
            },
            {
              max: 10,
              message: '内容长度不能超过10字符',
              trigger: 'blur'
            }],
            dicData:[],
            change: ({value,column}) => {
              if(value == '1-N'){
                this.findObject(this.option.column, 'generateMonth').display = false;  
                this.findObject(this.option.column, 'generateDay').display = false;  
                this.findObject(this.option.column, 'generateDatetime').display = false;  
                this.findObject(this.option.column, 'validDate').display = false;  
                this.findObject(this.option.column, 'validDate').rules[0].required = false;  
                
              }
              else if(value == '1-D'){
                this.findObject(this.option.column, 'generateMonth').display = false;  
                this.findObject(this.option.column, 'generateDay').display = false;  
                this.findObject(this.option.column, 'generateDatetime').display = true; 
                this.findObject(this.option.column, 'validDate').display = true;  
                this.findObject(this.option.column, 'validDate').rules[0].required = true; 
              }
              else if(value == '1-W'){
                this.findObject(this.option.column, 'generateMonth').display = false;  
                this.findObject(this.option.column, 'generateDay').display = true;  
                this.findObject(this.option.column, 'generateDatetime').display = true;  
                this.findObject(this.option.column, 'validDate').display = true;  
                this.findObject(this.option.column, 'validDate').rules[0].required = true; 
              }
              else if(value == '1-M'){
                this.findObject(this.option.column, 'generateMonth').display = false;  
                this.findObject(this.option.column, 'generateDay').display = true;  
                this.findObject(this.option.column, 'generateDatetime').display = true;  
                this.findObject(this.option.column, 'validDate').display = true;  
                this.findObject(this.option.column, 'validDate').rules[0].required = true; 
              }
              else if(value == '1-Y'){
                this.findObject(this.option.column, 'generateMonth').display = true;  
                this.findObject(this.option.column, 'generateDay').display = true;  
                this.findObject(this.option.column, 'generateDatetime').display = true;  
                this.findObject(this.option.column, 'validDate').display = true;  
                this.findObject(this.option.column, 'validDate').rules[0].required = true; 
              }
            }
          },
          {
            label: '生成月',
            prop: 'generateMonth', 
            type: 'select', 
            search: false,
            searchMmultiple: false,
            searchLabelWidth: 100,
            multiple: false,
            span: 6,
            sortable: false,
            hide: false,
            maxlength: 10,
            overHidden: true,
            value: '01',
            display: true,
            rules: [{
              message: '请输入生成日',
              required:  false,
              trigger: 'blur'
            },
            {
              max: 10,
              message: '内容长度不能超过10字符',
              trigger: 'blur'
            }],
            dicData:[
              {label: '01',value:'01'},
              {label: '02',value:'02'},
              {label: '03',value:'03'},
              {label: '04',value:'04'},
              {label: '05',value:'05'},
              {label: '06',value:'06'},
              {label: '07',value:'07'},
              {label: '08',value:'08'},
              {label: '09',value:'09'},
              {label: '10',value:'10'},
              {label: '11',value:'11'},
              {label: '12',value:'12'}
            ],
          },
          {
            label: '生成周/日',
            prop: 'generateDay', 
            type: 'select', 
            search: false,
            searchMmultiple: false,
            searchLabelWidth: 100,
            multiple: false,
            span: 6,
            sortable: false,
            hide: false,
            maxlength: 10,
            overHidden: true,
            value: '01',
            display: true,
            rules: [{
              message: '请输入生成日',
              required:  false,
              trigger: 'blur'
            },
            {
              max: 10,
              message: '内容长度不能超过10字符',
              trigger: 'blur'
            }],
            dicData:[
              {label: '01',value:'01'},
              {label: '02',value:'02'},
              {label: '03',value:'03'},
              {label: '04',value:'04'},
              {label: '05',value:'05'},
              {label: '06',value:'06'},
              {label: '07',value:'07'},
              {label: '08',value:'08'},
              {label: '09',value:'09'},
              {label: '10',value:'10'},
              {label: '11',value:'11'},
              {label: '12',value:'12'},
              {label: '13',value:'13'},
              {label: '14',value:'14'},
              {label: '15',value:'15'},
              {label: '16',value:'16'},
              {label: '17',value:'17'},
              {label: '18',value:'18'},
              {label: '19',value:'19'},
              {label: '20',value:'20'},
              {label: '21',value:'21'},
              {label: '22',value:'22'},
              {label: '23',value:'23'},
              {label: '24',value:'24'},
              {label: '25',value:'25'},
              {label: '26',value:'26'},
              {label: '27',value:'27'},
              {label: '28',value:'28'},
              {label: '29',value:'29'},
              {label: '30',value:'30'},
              {label: '31',value:'31'}
            ],
          },
          {
            label: '生成时间点',
            prop: 'generateDatetime', 
            type: 'select', 
            search: false,
            searchMmultiple: false,
            searchLabelWidth: 100,
            multiple: false,
            span: 6,
            sortable: false,
            hide: false,
            maxlength: 10,
            overHidden: true,
            value: '00:00:00',
            display: true,
            rules: [{
              message: '请输入生成时间点',
              required:  false,
              trigger: 'blur'
            },
            {
              max: 10,
              message: '内容长度不能超过10字符',
              trigger: 'blur'
            }],
            dicData:[
              {label: '00:00:00',value:'00:00:00'},
              {label: '01:00:00',value:'01:00:00'},
              {label: '02:00:00',value:'02:00:00'},
              {label: '03:00:00',value:'03:00:00'},
              {label: '04:00:00',value:'04:00:00'},
              {label: '05:00:00',value:'05:00:00'},
              {label: '06:00:00',value:'06:00:00'},
              {label: '07:00:00',value:'07:00:00'},
              {label: '08:00:00',value:'08:00:00'},
              {label: '09:00:00',value:'09:00:00'},
              {label: '10:00:00',value:'10:00:00'},
              {label: '11:00:00',value:'11:00:00'},
              {label: '12:00:00',value:'12:00:00'},
              {label: '13:00:00',value:'13:00:00'},
              {label: '14:00:00',value:'14:00:00'},
              {label: '15:00:00',value:'15:00:00'},
              {label: '16:00:00',value:'16:00:00'},
              {label: '17:00:00',value:'17:00:00'},
              {label: '18:00:00',value:'18:00:00'},
              {label: '19:00:00',value:'19:00:00'},
              {label: '20:00:00',value:'20:00:00'},
              {label: '21:00:00',value:'21:00:00'},
              {label: '22:00:00',value:'22:00:00'},
              {label: '23:00:00',value:'23:00:00'}
            ],
          },
          {
            label: '截止日期',
            prop: 'validDate', 
            type: 'date', 
            format:'yyyy-MM-dd',
            valueFormat: 'yyyy-MM-dd',
            value: this.$toolUtil.formatDate(new Date()),
            pickerOptions: {
              disabledDate(time) {
                return time.getTime() + 3600 * 1000 * 24 <= Date.now();
              }
            },
            search: false,
            searchMmultiple: false,
            searchLabelWidth: 100,
            multiple: false,
            span: 6,
            sortable: false,
            hide: false,
            maxlength: 20,
            overHidden: true,
            value: '2099-12-30',
            rules: [{
              message: '请输入截止日期',
              required:  false,
              trigger: 'blur'
            }],
            dicData:[]
          }, 
          {
            label: '会议议题',
            prop: 'conferenceIssue', 
            type: 'textarea', 
            search: false,
            searchMmultiple: false,
            searchLabelWidth: 100,
            multiple: false,
            span: 24,
            sortable: false,
            hide: false,
            maxlength: 1000,
            overHidden: true,
            showWordLimit:true,
            maxRow:5,
            minRow:3,
            rules: [{
              message: '请输入会议议题',
              required:  false,
              trigger: 'blur'
            },
            {
              max: 1000,
              message: '内容长度不能超过100字符',
              trigger: 'blur'
            }],
            dicData:[],
          },
          
          {
            label: '腾讯会议地址',
            prop: 'conferenceUrl', 
            type: 'input', 
            search: false,
            searchMmultiple: false,
            searchLabelWidth: 100,
            multiple: false,
            span: 12,
            sortable: false,
            hide: false,
            maxlength: 100,
            overHidden: true,
            readonly: true,
            placeholder: '请点击右侧按钮生成腾讯会议链接',
            display: false,
            rules: [{
           	  // 检查URL地址
              validator: (rule, value, callback) => {
                if(value != '' && !this.$validate.isURL(value)){
                  callback(new Error('点击生成腾讯会议链接！'));
                }
                else{
                  callback();
                }
              },
              required:  false,
              trigger: 'blur'
            },
            {
              max: 100,
              message: '内容长度不能超过100字符',
              trigger: 'blur'
            }],
            dicData:[],
          },
          {
            label: '腾讯会议号',
            prop: 'conferenceNo', 
            type: 'input', 
            search: false,
            searchMmultiple: false,
            searchLabelWidth: 100,
            multiple: false,
            span: 6,
            sortable: false,
            hide: false,
            maxlength: 100,
            overHidden: true,
            readonly: true,
            display: false,
            placeholder:'腾讯会议号',
            rules: [{
              required:  false,
              trigger: 'blur'
            },
            {
              max: 100,
              message: '内容长度不能超过100字符',
              trigger: 'blur'
            }],
            dicData:[],
          },
          {
            label: '',
            prop: 'genUrlBtn', 
            type: 'input', 
            span: 'slotBtn',
            display: false,
            slot: true
          },
          
          {
            label: '展示颜色',
            prop: 'color', 
            type: 'color', 
            search: false,
            searchMmultiple: false,
            searchLabelWidth: 100,
            multiple: false,
            span: 12,
            sortable: false,
            hide: false,
            maxlength: 40,
            overHidden: true,
            value: 'rgba(3, 47, 142, 1)',
            rules: [{
              message: '请输入颜色',
              required:  false,
              trigger: 'blur'
            },
            {
              max: 40,
              message: '内容长度不能超过0字符',
              trigger: 'blur'
            }],
            dicData:[],
          },
          {
            label: '全天显示',
            prop: 'allDayShowFlag', 
            type: 'switch', 
            search: false,
            searchMmultiple: false,
            searchLabelWidth: 100,
            multiple: false,
            span: 12,
            sortable: false,
            hide: false,
            maxlength: 1,
            overHidden: true,
            rules: [{
              message: '请输入全天显示标志',
              required:  false,
              trigger: 'blur'
            }],
            dicData:[{
              label: '否',
              value: '0'
            },{
              label: '是',
              value: '1'
            }],
          },
          {
            label: '会议附件',
            prop: 'conferenceAttList', 
            type: 'input',
            span: 24,
            slot: true
          }
        ]
      },
      currentRow: {},
      // 会议控制
      conferenceInfo: {
        defultConferenceRoomId: '',
        conferenceRoom: [],
        // 参会人options
        participantsOptions: [],
        // 召集人options
        convenerOptions: [],
        // 当前日期所在的时间段的开始时间和结束时间
        currentStartTime: '',
        currentEndTime: '',
        conferenceVisible: false,
        isAdd: false,
        isEdit: false,
        validFlag: false,
        conferenceList: [],
        loading: false,
        conferenceTypeOptions: [],
        isTencentMeeting: false,
        shareVisible: false,
        shareText: '',
      },
      // 请求参数区
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      reqParams: {
        singleBody: {},
        listBody: [{}],
        sqlCondition:[],
        orderRule: [],
        currentPage: 1,
        pageSize: 10
      },
      commonData: null,
      conditions: [],
      orderRules: [],
    }
  },
  computed: {
    ...mapGetters(['website','orgTree','userInfo','permission','projectList'])
  },
  watch: {
    
  },
  created(){

  },
  mounted() {
    let _self = this;
    this.$nextTick(() => {
      // 监听fullcalendar的事件
      let fullCalDom = document.querySelectorAll('.fc-header-toolbar .fc-toolbar-chunk .btn-group >button');
      for(let button of fullCalDom){
        button.addEventListener('click', function() {
          _self.changeDurationTime();
        });
      }

      let calendarApi = this.$refs.fullCalendar.getApi()
      this.conferenceInfo.currentStartTime = dateFormat(new Date(calendarApi.view.currentStart));
      this.conferenceInfo.currentEndTime = dateFormat(new Date(calendarApi.view.currentEnd));

      // 获取会议室
      this.getConferenceRoom();
      // 查询所有会议信息
      this.getConferenceList();
      //获取字典、参数
      setTimeout(() => {
        this.getSysParam();
        this.getSysDict();
      });
    });

  },
  methods: {
    
    /**
     * 调用子组件方法查询历史
     */
    getHistoryRecord () {
      setTimeout(() => {
        this.$refs.historyRecord.getUpdateHistoryRecord(this.form.id);
      })
    },
    /**
     * 选择文件后由子组件触发修改fileList
     */
    changeFileList(fileList){
      this.form.conferenceAttList = fileList;
    },
    /**
     * 重置新增、编辑弹窗的按钮控制标识
     */
    resetAddAndEditButton(){
      this.conferenceInfo.isAdd = false;
      this.conferenceInfo.isEdit = false;
    },
    /**
     * 获取会议室
     */
    getConferenceRoom(){
      let singleBody = {
        tenantId: localStorage.getItem('tenantId')
      }
      let reqParams =  {
        singleBody: singleBody,
        currentPage: 1, 
        pageSize: 10000
      }
      let commonData = reqCommonMsg(reqParams)
      queryGeneralConferenceRoomListPage(commonData).then(res => {
        const data = res.data.body;
        this.conferenceRoomList = data.listBody;
        let conferenceRoomOptions = [];
        this.conferenceInfo.conferenceRoom.push({
          label: '所有会议室',
          value: ''
        })
        this.conferenceInfo.conferenceRoom.push({
          label: '线上会议',
          value: 'online'
        })

        conferenceRoomOptions.push({
          label: '线上会议',
          value: 'online'
        })
        this.conferenceRoomList.map((item,index) => {
          if(index == 0){
            this.findObject(this.option.column, 'conferenceRoomId').value = item.id;
          }
          conferenceRoomOptions.push({
            label: item.conferenceRoomName+' ('+item.officeAreaName +' - '+item.floorNo+')',
            value: item.id
          });
          this.conferenceInfo.conferenceRoom.push({
            label: item.conferenceRoomName+' ('+item.officeAreaName +' - '+item.floorNo+')',
            value: item.id
          });
        });
        this.findObject(this.option.column, 'conferenceRoomId').dicData = conferenceRoomOptions;
      }, error => {
        //this.$console.log(error);
      });
    },

    // 修改日程查询的开始和结束日期
    changeDurationTime(){
      //
      let calendarApi = this.$refs.fullCalendar.getApi()
      this.conferenceInfo.currentStartTime = dateFormat(new Date(calendarApi.view.activeStart));
      this.conferenceInfo.currentEndTime = dateFormat(new Date(calendarApi.view.activeEnd));
      this.getConferenceList();
    },

    handleWeekendsToggle() {
      this.calendarOptions.weekends = !this.calendarOptions.weekends // update a property
    },

    handleEvents(events) {
      this.currentEvents = events
    },
    eventMouseEnter(events){
      //this.$console.log('events==',events)
    },
    handleDateClick: function(arg) {
      //this.$console.log('date click! ' + arg.dateStr)
    },
    // 拖动日程停止后事件
    eventDragStop: function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading'
      });

      // 判断修改前后相差多少天
      let oldStart = event.oldEvent.start;
      let start = event.event.start;
      let diffDay = (start.getTime() - oldStart.getTime())/(1000 * 60 * 60 * 24)

      // 拖动日程，修改日程日期
      let conferenceId = event.event.id;
      let conference = {};
      this.conferenceInfo.conferenceList.map(item => {
        if(conferenceId === item.id){
          conference = item;
          conference.conferenceBeginDatetime = dateFormat(new Date(new Date(conference.conferenceBeginDatetime).getTime() + (diffDay * (1000 * 60 * 60 * 24))));
          conference.conferenceEndDatetime = dateFormat(new Date(new Date(conference.conferenceEndDatetime).getTime() + (diffDay * (1000 * 60 * 60 * 24))));
        }
      });

      // 修改日程日期
      // delete schedule.readFlag;
      let reqParams = {
        singleBody: conference
      };
      let commonData = reqCommonMsg(reqParams);
      updateGeneralConferenceInfo(commonData).then(() => {
        this.conferenceInfo.conferenceVisible = false;
        this.resetAddAndEditButton();
        this.getConferenceList();
        loading.close();
        this.$message({
          type: 'success',
          message: '操作成功!'
        });
      }, error => {
        //this.$console.log(error);
        loading.close();
      });
    },
    // 调整日程大小修改日期
    eventResize(event){
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading'
      });

      // 判断修改前后相差多少天
      let oldStart = event.oldEvent.start;
      let start = event.event.start;
      let startDiffDay = (start.getTime() - oldStart.getTime())/(1000 * 60 * 60 * 24)
      let oldEnd = event.oldEvent.end;
      let end = event.event.end;
      let endDiffDay = (end.getTime() - oldEnd.getTime())/(1000 * 60 * 60 * 24)

      // 拖动日程，修改日程日期
      let conferenceId = event.event.id;
      let conference = {};
      this.conferenceInfo.conferenceList.map(item => {
        if(conferenceId === item.id){
          conference = item;
          conference.conferenceBeginDatetime = dateFormat(new Date(new Date(conference.conferenceBeginDatetime).getTime() + (startDiffDay * (1000 * 60 * 60 * 24))));
          conference.conferenceEndDatetime = dateFormat(new Date(new Date(conference.conferenceEndDatetime).getTime() + (endDiffDay * (1000 * 60 * 60 * 24))));
        }
      });

      // 修改日程日期
      // delete schedule.readFlag;
      let reqParams = {
        singleBody: conference
      };
      let commonData = reqCommonMsg(reqParams);
      updateGeneralConferenceInfo(commonData).then(() => {
        this.conferenceInfo.form = {};
        this.conferenceInfo.conferenceVisible = false;
        this.resetAddAndEditButton();
        this.getConferenceList();
        loading.close();
        this.$message({
          type: 'success',
          message: '操作成功!'
        });
      }, error => {
        //this.$console.log(error);
        loading.close();
      });
    },
    /**
     * 筛选会议室
     */
    changeConferenceRoom(val){
      this.getConferenceList()
    },
    /**
     * 获取会议列表
     */
    getConferenceList(){
      this.conferenceInfo.loading = true;
      let singleBody = {
        conferenceBeginDatetime: this.conferenceInfo.currentStartTime,
        conferenceEndDatetime: this.conferenceInfo.currentEndTime,
        conferenceRoomId: this.conferenceInfo.defultConferenceRoomId
      };
      let reqParams =  {
        singleBody: singleBody
      }
      let commonData = reqCommonMsg(reqParams)
      queryConferenceDuration(commonData).then(res => {
        let result = res.data.body.listBody;
        if(result.length > 0){
          this.calendarOptions.events = [];
          result.forEach(item => {
            let allDay = false;
            let end = item.conferenceEndDatetime;
            if(item.allDayShowFlag === '0'){
              allDay = false;
            }else if(item.allDayShowFlag === '1'){
              allDay = true;
              if(item.conferenceEndDatetime.substring(11, 19) !== '00:00:00'){
                end = new Date(new Date(item.conferenceEndDatetime).getTime() + 1000 * 60 * 60 * 24);
              }
            }
            this.calendarOptions.events.push({
              id: item.id,
              description: item.conferenceIssue,
              title: item.conferenceSubject + ' [' + item.conferenceType + ']',
              start: item.conferenceBeginDatetime,
              end: end,
              color: item.color,
              allDay: allDay
            })
          });
        }
        else{
          //改写No Event To Display;
          var ele =document.getElementsByClassName('fc-list-empty-cushion');
          if(ele.length > 0){
            setTimeout(() => {
              ele[0].innerText = '没有更多数据！';
            }, 100);
          }
        }
        // 保存当前页面上的日程信息
        this.conferenceInfo.conferenceList = result;
        this.conferenceInfo.loading = false;
      }, error => {
        //this.$console.log(error);
        this.conferenceInfo.loading = false;
      });
    },
    
    /**
     * 创建腾讯会议
     */
    createTencentMeeting(event){
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading'
      });
      let reqParams =  {
        singleBody:{
          ...this.form,
          conferenceBeginDatetime: this.$toolUtil.formatTimes(new Date(this.form.conferenceBeginDatetime)),
          conferenceEndDatetime: this.$toolUtil.formatTimes(new Date(this.form.conferenceEndDatetime))
        },
      }
      let commonData = reqCommonMsg(reqParams)
      createTencentMeeting(commonData).then(res => {
        let data = res.data.body.singleBody;
        this.form.conferenceUrl = data.conferenceUrl
        this.form.conferenceNo = data.conferenceNo
        this.$console.log('==data==',data);
        this.$forceUpdate();
        this.$message({
          type: 'success',
          message: '获取成功!'
        });
        loading.close();
      }, error => {
        //this.$console.log(error);
        loading.close();
      });
    },

    /**
     * 打开邀请框
     */
    openShare(){
      this.conferenceInfo.shareVisible = true;  
      this.conferenceInfo.shareText = this.userInfo.realName + ' 邀请您参加腾讯会议\n' + 
                                      '会议主题：' + this.form.conferenceSubject + '\n' +
                                      '会议时间：' + dateFormat(this.form.conferenceBeginDatetime) + ' - ' + dateFormat(this.form.conferenceEndDatetime) + '\n\n' + 
                                      '点击链接直接加入会议：\n' + this.form.conferenceUrl + '\n\n' + '会议 ID：' + this.form.conferenceNo;
    },

    /**
     * 拷贝到剪贴板
     */
    copyClipboard(){
      copyToClipboard(this.conferenceInfo.shareText, this);  
    },
    /**
     * 打开新建时初始化日期
     */
    handleDateSelect(selectInfo) {
      this.dialogTitle = '创建会议';
      let startDate = selectInfo.start
      this.$console.log('startDate1==',startDate);
      if(new Date().getTime() > new Date(startDate).getTime()){
        startDate = new Date();
      }
      this.$console.log('startDate2==',startDate);
      this.conferenceInfo.conferenceVisible = true;
      this.conferenceInfo.isAdd = true;
      this.conferenceInfo.isEdit = false;
      // this.conferenceInfo.rules = this.conferenceInfo.conferenceRules;
      this.form.conferenceAttList = [];
      this.form.conferenceBeginDatetime = startDate;
      this.form.conferenceEndDatetime = selectInfo.end;
      this.form.convenerUserName = this.userInfo.realName+'('+this.userInfo.userName+')';
      this.form.participantsList = [this.userInfo.realName+'('+this.userInfo.userName+')'];
      this.form.conferenceNo = '';
      this.form.conferenceUrl = '';
      this.form.conferenceSubject = '';
      this.form.conferenceIssue = '';
      // this.findObject(this.option.column, 'convenerUserName').dicData = [{
      //   value: this.userInfo.realName+'('+this.userInfo.userName+')',
      //   label: this.userInfo.realName+'('+this.userInfo.userName+')'
      // }];
    },
    /**
     * 点击会议查询当前会议记录
     */
    handleEventClick(clickInfo) {
      this.dialogTitle = '修改会议';
      this.conferenceInfo.isAdd = false;
      this.conferenceInfo.isEdit = true;
      let reqParams =  {
        singleBody: {
          id: clickInfo.event.id
        }
      }
      let commonData = reqCommonMsg(reqParams)
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading'
      });
      queryGeneralConferenceInfo(commonData).then(res => {
        this.form = res.data.body.singleBody;
        this.conferenceInfo.conferenceVisible = true;
        this.form.conferenceBeginDatetime = new Date(this.form.conferenceBeginDatetime),
        this.form.conferenceEndDatetime = new Date(this.form.conferenceEndDatetime),
        this.form.participantsList = JSON.parse(this.form.participantsList);
        this.form.conferenceAttList  = JSON.parse(this.form.conferenceAttList);
        this.form.convenerUserName = this.form.convenerRealName+'('+this.form.convenerUserName+')';
        this.conferenceInfo.isEdit = true;
        loading.close();
      }, error => {
        //this.$console.log(error);
        loading.close();
      });
    },
    /**
     * 点击提交按钮
     */
    submitForm(row,done){
      if(this.conferenceInfo.isAdd){
        this.addConference(row,done);
      }
      else if(this.conferenceInfo.isEdit){
        this.editConference(row,done);
      }
    },
    /**
     * 新增会议
     */
    addConference(row,done){
    	const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading'
      });

      // 处理日程信息
      let params ={
        singleBody:{
          ...this.form,
          id: '',
          projectName: this.form.$projectNo,
          participantsList: JSON.stringify(this.form.participantsList),
          conferenceBeginDatetime: this.$toolUtil.formatTimes(new Date(this.form.conferenceBeginDatetime)),
          conferenceEndDatetime: this.$toolUtil.formatTimes(new Date(this.form.conferenceEndDatetime)),
          convenerRealName:this.$util.formatUserName(this.form.convenerUserName).userName,// 使用人名
          convenerUserName:this.$util.formatUserName(this.form.convenerUserName).userId,// 使用用户名
          conferenceRoom: this.form.$conferenceRoomId
        },
        currentPage: 0,
        pageSize: 0
      };
      saveGeneralConferenceInfo(reqCommonMsg(params)).then(() => {
        this.form = {};
        this.conferenceInfo.conferenceVisible = false;
        loading.close();
        this.getConferenceList();
        this.$message({
          type: 'success',
          message: '会议新增成功!'
        });
        done()
      }, error => {
        //this.$console.log('qwerte==',error);
        done()
        loading.close();
      });
    },

    // 修改会议
    editConference(row,done){
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading'
      });
      // 处理日程信息
      let params ={
        singleBody:{
          ...this.form,
          participantsList: JSON.stringify(this.form.participantsList),
          conferenceBeginDatetime: this.$toolUtil.formatTimes(new Date(this.form.conferenceBeginDatetime)),
          conferenceEndDatetime: this.$toolUtil.formatTimes(new Date(this.form.conferenceEndDatetime)),
          convenerRealName:this.$util.formatUserName(this.form.convenerUserName).userName,// 使用人名
          convenerUserName:this.$util.formatUserName(this.form.convenerUserName).userId,// 使用用户名
          projectName: this.form.$projectNo,
          conferenceRoom: this.form.$conferenceRoomId
        },
        currentPage: 0,
        pageSize: 0
      };
        // 处理日程信息
      updateGeneralConferenceInfo(reqCommonMsg(params)).then(() => {
        this.conferenceInfo.conferenceVisible = false;
        this.getConferenceList();
        loading.close();
        this.$message({
          type: 'success',
          message: '会议修改成功!'
        });
        done();
        this.form = {};
      }, error => {
        done();
        loading.close();
      });
    },
    /**
     * 删除会议
     */
    deleteConferenceInfo(){
      this.$confirm('确定要删除当前会议?', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'})
        .then(() => {
          return deleteGeneralConferenceInfo(reqCommonMsg({singleBody:this.form}));
        })
        .then(() => {
          this.getConferenceList();
          this.conferenceInfo.conferenceVisible = false;
          this.$message({type: 'success',message: '删除成功!'});
        }).catch(() => {});
    },
    /**
     * 发送通知
     */
    sendNotice(){
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading'
      });
      let singleBody = {
        id: this.conferenceInfo.form.id
      }
      let reqParams =  {
        singleBody: singleBody
      }
      let commonData = reqCommonMsg(reqParams)
      sendNotice(commonData).then(res => {
        loading.close();
        this.$message({
          type: 'success',
          message: '发送成功!'
        });
      }, error => {
        //this.$console.log(error);
        loading.close();
      });
    },
    
    /**
     * 获取工作日参数
     */
    async getSysParam() {
      let sysParamData = await this.$params.getSysParam('calendarWorkdayParam');
      if(sysParamData){
        let businessHours = JSON.parse(sysParamData.calendarWorkdayParam);
        this.calendarOptions.businessHours = businessHours
      }
    },
    /**
     * 获取系统字典参数
     */
    async getSysDict() {
      let dicData = await this.$params.getBizDict('["generateFrequency","conferenceType"]');
      this.findObject(this.option.column, 'conferenceType').dicData = dicData.conferenceType;
      this.findObject(this.option.column, 'generateFrequency').dicData = dicData.generateFrequency;
      //加载项目列表
      let projectInfo=[];
      setTimeout(() => {
        this.projectList.forEach((element,index) => {
          if(index == 0){
            this.findObject(this.option.column, 'projectNo').value = element.projectNo;
          }
          projectInfo.push(
            {
              label: element.projectName,
              value: element.projectNo
            }
          );
        }); 
        this.findObject(this.option.column, 'projectNo').dicData = projectInfo;
      }, 3000);
    },
  }
}
</script>
<style lang='css'>
.conference {
  display: flex;
  min-height: 100%;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
  background-color: #fff;
}
.conference .el-calendar__header{
  padding: 12px 10px;
}
.conference .el-calendar__header .el-calendar__button-group{
  width: 35%;
  text-align: right;
}
.conference .el-calendar__header .el-calendar__button-group .el-button-group > button:nth-of-type(1){
  width: 20%;
  border: 0;
  padding: 5px 10px 5px 5px;
  font-size: 12px;
}
.conference .el-calendar__header .el-calendar__button-group .el-button-group > button:nth-of-type(2){
  border: 0;
  padding: 5px 5px 5px 5px;
}
.conference .el-calendar__header .el-calendar__button-group .el-button-group > button:nth-of-type(3){
  width: 20%;
  border: 0;
  padding: 5px 5px 5px 5px;
}

.is-selected {
  color: #1989FA;
}

.conference-right {
  flex-grow: 1;
  padding: 1em;
}

.fc { /* the calendar root */
  /* max-width: 1100px; */
  margin: 0 auto;
}
.conference-right .fc-header-toolbar .btn{
  line-height: 1 !important;
}
.is-selected {
  color: #1989FA;
}

.calendar-add-icon:hover{
  border: 1px solid #cccccc;
  border-radius: 3px;
  background-color: #f1f1f1;
}

.conference .el-input{
  border-bottom: 0!important;
}

.conference .dialogFormItem{
  width: 450px;
}

.conference .dialogFormItem .half-input .el-input__inner{
  width: 320px;
}
.conference .mini-dialogFormItem .mini-input .el-input__inner{
  width: 120px;
}
.conference .full-dialogFormItem .full-input .el-input__inner{
  width: 780px;
}
.conference .full-dialogFormItem .full-input .el-textarea__inner{
  width: 780px;
}

.send-wechat-div{

}
.el-col-slotBtn{
  width: 25% !important;
}
.el-col-slotBtn .el-form-item__content{
  margin-left: 40px !important;
}
</style>